<template>
	<div class="page">
		<section id="home" class="home" @touchstart="finishKey">
		    <mobileCard @getPhone="getPhone" @searchPrice="searchPrice" ref="mobileCard" :carNum="carInfo.carNo" :isEeterEnd="isEeterEnd"></mobileCard>
		    <parkingCost ref="parkingCost"></parkingCost>
		    <div class="immediately" v-if="isEeterEnd !== 0">
		         <div class="cancel" @click="cancel">取消</div>
		         <div class="confirm" @click="mPay">立即支付</div>
		    </div>
		</section>
	</div>
</template>

<script>
import mobileCard from '@/components/mobile/index.vue'
import parkingCost from '@/components/parkingCost/index.vue'
import qs from 'qs';
export default {
	components: {
		parkingCost,
		mobileCard
	},
	data () {
		return {
			isEeterEnd : 1,
			code : "",
			carInfo : {},
			isWechat : false,
			isAlipay : false,
			payType : ""
		}
	},
  created () {
    this.isWeChat();
    this.queryData();
    // this.SeachPublic();
  },
  mounted () {
    let home = document.getElementById("home");
    home.focus(function(){
      document.activeElement.blur();
    });
  },
	methods : {
    getPhone (data) {
      let num = "";
      if (Array.isArray(data)) {
        data.forEach(item=>{
          num +=  item.value;
        });
        this.phone = num;
      } else {
        this.phone = data;
      }
      console.log(this.phone);
    },
    queryData () {
      this.axios.get("/data/queryData",{
        params : {
          dictLabel : this.isWechat ? "wx" : "zfb"
        }
      }).then(res=>{
          this.payType = res.data.data.dictValue;
          this.getCarOrder();
      });
    },
    searchPrice (data) {
      this.$refs.parkingCost.show(data);
    },
		finishKey () {
      this.$refs.mobileCard.finishKey();
		},
    getCarOrder (fn) {
      console.log(this.$route.query)
      this.axios.get("/order/caterOrder",{
        params : {
          lid : this.$route.query.LID,
          sid : this.$route.query.SID,
          pid : this.$route.query.PID,
          parkId : this.$route.query.ParkID,
          payType : this.payType,
          carNo : this.phone || ""
        }
      }).then(res=>{
         if (res.data.data) {
           let inDatetime = new Date(res.data.data.inDatetime);
           let hours = inDatetime.getHours() < 10 ? "0" + inDatetime.getHours() : inDatetime.getHours();
           let min = inDatetime.getMinutes() < 10 ? "0" + inDatetime.getMinutes() : inDatetime.getMinutes();
           res.data.data.inDatetime = inDatetime.toLocaleDateString() + " " + hours + ":" + min;
           this.carInfo = res.data.data;
           if (typeof fn === "function") {
             fn();
           }
         }
      });
    },
    mPay () {
      if (!this.carInfo.orderNo) {
        this.getCarOrder(this.mPay);
        return;
      }
      this.axios.get("/mPay/pay",{
        params : {
          outTradeNo : this.carInfo.orderNo,
          totalFee : this.carInfo.fees * 100,
        }
      }).then(res=>{
        this.$store.commit("setLoading",true);
        window.open(res.data,"_self");
      });
    },
    isWeChat () {
      let ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
          this.isWechat = true;
      } else {
          this.isAlipay = true;
      }
    },
    cancel () {
      let wxObj = WeixinJSBridge;
      if (wxObj) {
        WeixinJSBridge.call('closeWindow');
      }
    }
	}
}
</script>

<style lang="scss" scoped="scoped">
	.home {
	    height: 100%;
      width: 100%;
	    background: url('../assets/images/beijing.png') 100% 0% no-repeat;
	    background-color: #f5f5f5;
	    background-size: contain;
	    overflow: hidden;
	    .immediately{
	       position: fixed;
	       bottom: 0px;
	       height: 1rem;
	       width: 100%;
	       color: #fff;
	       font-size: 0.3rem;
	       div{
	         display: inline-block;
	         width: 50%;
	         height: 1rem;
	         line-height: 1rem;
	       }
	       div:nth-child(1) {
	         background: #000000;
	       }
	       div:nth-child(2) {
	         background: #FF8A07;
	       }
	    }
	}
</style>
